<template>
  <div>
    <button @click="infoClick">info:{{ info }}</button>
    <button @click="readOnlyInfoClick">readOnlyInfo:{{ readOnlyInfo }}</button>
  </div>
</template>

<script setup>
import { reactive, readonly, ref, shallowReadonly } from "vue";

const info = reactive({
  msg: "info",
});
const infoClick = () => {
  info.msg += 1;
};
// 接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理。
const readOnlyInfo = readonly(info);
const readOnlyInfoClick = () => {
  readOnlyInfo.msg += 22;
};
</script>

<style scoped>
button {
  padding: 20px 20px;
  background-color: pink;
}
</style>
